<template>
    <div>
        <div class="ymsbanner">
            <h1 class="title">THANK</h1>
        </div>
        <div class="guide">
            <p class="title">Claim your free gift</p>
            <p>Step1 Review in Amazon and save screenshot of review.</p>
            <p>Step2 Go back website upload the screenshot.</p>
            <p>Step3 We will send the gift to you within 7 days</p>
            <div style="text-align: center;margin-top: 40px">
                <el-rate
                    v-model="params.commentStarRating"
                    :colors="colors">
                </el-rate>
            </div>
            <div style="text-align: center;margin-top: 16px">
                <button @click="submit">Review Now</button>
            </div>
        </div>
    </div>
</template>

<script>
    import {post} from '../../api/index'
    export default {
        data() {
            return {
                params: {
                    orderId: '',
                    editCategory: '1',
                    commentStarRating: 0
                },
                queryData: null,
                rateValue: '',
                colors: ['#99A9BF', '#F7BA2A', '#FF9900'] 
            }
        },
        methods: {
            submit() {
                post('/landing_page/recordCustomerStarRating', this.params).then(res => {
                    if (res.code === 200) {
                        if(this.params.commentStarRating < 4) {
                            this.$router.push({path:'/thank'})
                        } else {
                            this.$router.push({path:'/upload', query: {orderId: this.queryData.orderId, orderImage: this.queryData.orderImage, asin: this.queryData.asin}})
                        }
                    }
                })
            }
        },
        mounted() {
            this.params.orderId = this.$route.query.orderId;
            this.queryData = this.$route.query;
            if (!this.params.orderId) {
                this.$router.replace('/');
                return
            }
        }
    }
</script>

<style lang="less" scoped>
.ymsbanner{
    width: 100%;
    height: 150px;
    line-height: 150px;
    background-image: url(../../assets/registration.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    .title{
        text-align: center;
        font-size: 56px;
        color: #fff;
    }
}
.guide{
    max-width: 650px;
    width: 85%;
    margin: 0 auto;
    margin-top: 60px;
    padding: 30px 15px;
    background: rgba(0,0,0,0.1);
    text-align: left;
    .title{
        font-weight: 700;
        text-align: center;
        font-size: 22px;
        color: #fb9c2e;
    }
    p{
        margin-bottom: 12px;
        color: #666;
    }
    i{
        font-size: 32px !important;
    }
    button{
        margin-top: 15px;
        text-align: center;
        width: 50%;
        padding: 12px 0;
        background: #fb9c2e;
        border-color: #fb9c2e;
        border: none;
        outline: none;
        border-radius: 5px;
        cursor: pointer;
        font-weight: 700;
        font-size: 16px;

    }
}
@media only  screen and  (max-width:900px){
    .ymsbanner{
        background: none;
        display: none;
    }
}
</style>